<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" class="statistics">
        <el-tooltip
          class="item"
          effect="dark"
          content="使用用户端的人数"
          placement="top-start"
        >
          <el-button class="tips">用户总数:{{ userData.userid }}</el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="8" class="statistics">
        <el-tooltip
          class="item"
          effect="dark"
          content="目前已发布的文章总数"
          placement="top-start"
        >
          <el-button class="tips"
            >文章总数：{{ userData.arictlesid }}</el-button
          >
        </el-tooltip>
      </el-col>
      <el-col :span="8" class="statistics">
        <el-tooltip
          class="item"
          effect="dark"
          content="所有文章的所有评论数"
          placement="top-start"
        >
          <el-button class="tips">评论总数：{{ userData.commentsid }}</el-button>
        </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList, getarictlesList, getcommentsList } from "../api/shuliang";
export default {
  data() {
    return {
      tableData: [],
      userData: {
        userid: "0",
        arictlesid: "0",
        commentsid :"0"
      },
    };
  },
  methods: {},
  mounted() {
    getList()
      .then((res) => {
        this.tableData = res.data.data;
        this.userData.userid = this.tableData.data.length;
      })
      .catch((err) => {
        console.log(err);
      });
    getarictlesList()
      .then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.userData.arictlesid = this.tableData.data.length;
      })
      .catch((err) => {
        console.log(err);
      });
    getcommentsList()
      .then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        console.log(this.tableData);
        this.userData.commentsid = this.tableData.data.length;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
.echarts {
  width: 400px;
  height: 400px;
}

.tips {
  font-size: 20px;
}

.statistics {
  text-align: center;
}

.item {
  width: 250px;
  height: 100px;
}
</style>